<template>
  <div class="report-info-container">
    <!-- 统计数据卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-title">待审核举报</div>
            <div class="stat-number">{{ reportStats.pendingCount }}</div>
            <div class="stat-desc">需要尽快处理的举报数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-title">今日举报</div>
            <div class="stat-number">{{ reportStats.todayCount }}</div>
            <div class="stat-desc">今日新增的举报数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-title">总举报数</div>
            <div class="stat-number">{{ reportStats.totalCount }}</div>
            <div class="stat-desc">系统累计的举报总数</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="search-card">
      <el-form 
        :model="searchForm" 
        ref="searchFormRef" 
        :label-width="isMobile.value ? '100px' : '120px'" 
        :inline="!isMobile.value"
        :label-position="isMobile.value ? 'top' : 'right'"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="举报人用户ID" prop="reporterUserId">
              <el-input 
                v-model="searchForm.reporterUserId" 
                placeholder="请输入举报人用户ID" 
                clearable 
                :style="{ width: isMobile.value ? '100%' : 'auto' }"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="被举报人用户ID" prop="reportedUserId">
              <el-input 
                v-model="searchForm.reportedUserId" 
                placeholder="请输入被举报人用户ID" 
                clearable 
                :style="{ width: isMobile.value ? '100%' : 'auto' }"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="举报目标类型" prop="targetType">
              <el-select 
                v-model="searchForm.targetType" 
                placeholder="请选择举报目标类型" 
                clearable 
                :style="{ width: isMobile.value ? '100%' : '80px' }"
              >
                <el-option label="图文" :value="1" />
                <el-option label="视频" :value="2" />
                <el-option label="评论" :value="3" />
                <el-option label="用户" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="举报状态" prop="reportStatus">
              <el-select 
                v-model="searchForm.reportStatus" 
                placeholder="请选择举报状态" 
                clearable 
                :style="{ width: isMobile.value ? '100%' : '120px' }"
              >
                <el-option label="待审核" :value="0" />
                <el-option label="审核中" :value="1" />
                <el-option label="已处理" :value="2" />
                <el-option label="已驳回" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="searchForm.startTime"
                type="date"
                placeholder="请选择开始时间"
                value-format="YYYY-MM-DD"
                clearable
                :style="{ width: isMobile.value ? '100%' : 'auto' }"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="searchForm.endTime"
                type="date"
                placeholder="请选择结束时间"
                value-format="YYYY-MM-DD"
                clearable
                :style="{ width: isMobile.value ? '100%' : 'auto' }"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="search-buttons" :class="{ 'mobile-buttons': isMobile.value }">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <template #header>
        <div class="table-header">
        </div>
      </template>
      
      <el-table
        :data="reportList"
        v-loading="loading"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        :fit="isMobile.value"
        size="small"
      >
        <el-table-column type="selection" width="55" :show="!isMobile.value" />
        <el-table-column prop="reportId" label="举报ID" min-width="100" />
        <el-table-column prop="reporterUserId" label="举报人ID" min-width="120" :show="!isMobile.value" />
        <el-table-column prop="reportedUserId" label="被举报人ID" min-width="120" />
        <el-table-column prop="reporterNickname" label="举报人" min-width="100" />
        <el-table-column prop="reportedNickname" label="被举报人" min-width="100" />
        <el-table-column prop="targetTypeName" label="目标类型" min-width="80" />
        <el-table-column prop="targetId" label="目标ID" min-width="100" :show="!isMobile.value" />
        <el-table-column prop="reportTypeName" label="举报类型" min-width="80" />
        <el-table-column prop="reportStatusName" label="状态" min-width="80">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.reportStatus)">{{ row.reportStatusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="auditResultName" label="审核结果" min-width="80" />
        <el-table-column prop="createTime" label="举报时间" min-width="120" />
        <el-table-column prop="auditTime" label="审核时间" min-width="120" :show="!isMobile.value" />
        <el-table-column label="操作" fixed="right" min-width="150">
          <template #default="{ row }">
            <el-button size="small" @click="handleView(row)">{{ isMobile.value ? '查' : '查看' }}</el-button>
            <el-button v-if="row.reportStatus === 0" size="small" type="primary" @click="handleAudit(row)">{{ isMobile.value ? '审' : '审核' }}</el-button>
            <el-button v-if="(row.reportStatus === 1) && !row.handleResult" size="small" type="success" @click="handleProcess(row)">{{ isMobile.value ? '处' : '处理' }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container" :class="{ 'mobile-pagination': isMobile.value }">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="isMobile.value ? [5, 10, 20] : [10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          size="small"
        />
      </div>
    </el-card>

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="举报详情"
      :width="getDialogWidth()"
      :before-close="handleDetailDialogClose"
      v-loading="detailLoading"
      destroy-on-close
    >
      <el-form :model="currentReport" label-width="120px" v-if="currentReport">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="举报ID：">
              <span>{{ currentReport.reportId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：">
              <span>{{ currentReport.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="举报人用户ID：">
              <span>{{ currentReport.reporterUserId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被举报人用户ID：">
              <span>{{ currentReport.reportedUserId }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="举报人昵称：">
              <span>{{ currentReport.reporterNickname }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被举报人昵称：">
              <span>{{ currentReport.reportedNickname }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="举报人手机号：">
              <span>{{ currentReport.reporterPhone || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被举报人手机号：">
              <span>{{ currentReport.reportedPhone || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="举报目标类型：" style="">
              <span>{{ currentReport.targetTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="举报目标ID：">
              <span>{{ currentReport.targetId }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="举报目标内容：">
              <span>{{ currentReport.targetContent || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="举报类型：">
              <span>{{ currentReport.reportTypeName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="举报状态：">
              <el-tag :type="getStatusTagType(currentReport.reportStatus)">
                {{ currentReport.reportStatusName }}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核结果：">
              <el-tag v-if="currentReport.auditResult === 1" type="danger">违规</el-tag>
              <el-tag v-else-if="currentReport.auditResult === 2" type="success">不违规</el-tag>
              <span v-else>-</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="审核人：">
              <span>{{ currentReport.auditUserName || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核时间：">
              <span>{{ currentReport.auditTime || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="举报原因：">
          <span>{{ currentReport.reportReason || '-' }}</span>
        </el-form-item>
        <el-form-item label="举报证据：">
          <div v-if="currentReport.reportImages && Array.isArray(currentReport.reportImages) && currentReport.reportImages.length > 0" class="image-preview">
            <el-image
              v-for="(image, index) in currentReport.reportImages"
              :key="index"
              :src="image"
              fit="cover"
              style="width: 100px; height: 100px; margin-right: 10px"
              :preview-src-list="currentReport.reportImages"
              :initial-index="index"
              :preview-teleported="true"
            />
          </div>
          <div v-else-if="currentReport.reportImages && typeof currentReport.reportImages === 'string' && currentReport.reportImages.length > 0" class="image-preview">
            <el-image
              v-for="(image, index) in currentReport.reportImages.split(',')"
              :key="index"
              :src="image"
              fit="cover"
              style="width: 100px; height: 100px; margin-right: 10px"
              :preview-src-list="currentReport.reportImages.split(',')"
              :initial-index="index"
              :preview-teleported="true"
            />
          </div>
          <span v-else>-</span>
        </el-form-item>
        <el-form-item v-if="currentReport.fileUrl" label="动态内容文件：">
          <div v-if="isImageFile(currentReport.fileUrl)" class="file-preview">
            <!-- 处理单个或多个图片URL -->
            <div v-if="currentReport.fileUrl.includes(',')" class="image-gallery">
              <el-image
                v-for="(image, index) in currentReport.fileUrl.split(',')"
                :key="index"
                :src="image.trim()"
                fit="cover"
                style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px"
                :preview-src-list="currentReport.fileUrl.split(',').map(url => url.trim())"
                :initial-index="index"
                :preview-teleported="true"
              />
            </div>
            <el-image
              v-else
              :src="currentReport.fileUrl"
              fit="cover"
              style="width: 200px; height: 200px"
              :preview-src-list="[currentReport.fileUrl]"
              :preview-teleported="true"
            />
          </div>
          <div v-else-if="isVideoFile(currentReport.fileUrl)" class="file-preview">
            <video :src="currentReport.fileUrl" controls style="width: 100%; max-width: 400px; height: auto">
              您的浏览器不支持视频播放。
            </video>
          </div>
          <div v-else>
            <el-link :href="currentReport.fileUrl" target="_blank">{{ currentReport.fileUrl }}</el-link>
          </div>
          <div v-if="!isValidFile(currentReport.fileUrl)" class="file-error">
            文件异常
          </div>
        </el-form-item>
        <div v-if="currentReport.auditRemark">
          <el-form-item label="审核备注：">
            <span>{{ currentReport.auditRemark }}</span>
          </el-form-item>
        </div>
        <div v-if="currentReport.handleResultName">
          <el-form-item label="处理结果：">
            <el-tag>{{ currentReport.handleResultName }}</el-tag>
          </el-form-item>
        </div>
        <div v-if="currentReport.handleRemark">
          <el-form-item label="处理备注：">
            <span>{{ currentReport.handleRemark }}</span>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog
      v-model="auditDialogVisible"
      title="举报审核"
      :width="getDialogWidth()"
      :before-close="handleAuditDialogClose"
      destroy-on-close
    >
      <el-form 
        :model="auditForm" 
        :rules="auditRules"
        ref="auditFormRef" 
        :label-width="isMobile.value ? '80px' : '120px'"
        :label-position="isMobile.value ? 'top' : 'right'"
      >
        <el-form-item label="举报ID：">
          <span>{{ currentReport.reportId }}</span>
        </el-form-item>
        <el-form-item label="举报内容：">
          <span>{{ currentReport.reportReason }}</span>
        </el-form-item>
        <el-form-item label="审核结果：" prop="auditResult">
          <el-radio-group v-model="auditForm.auditResult">
            <el-radio :label="1">违规</el-radio>
            <el-radio :label="2">不违规</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核备注：" prop="auditRemark">
          <el-input
            v-model="auditForm.auditRemark"
            type="textarea"
            :rows="3"
            placeholder="请输入审核备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" :class="{ 'mobile-dialog-footer': isMobile.value, 'mobile-buttons': isMobile.value }">
          <el-button @click="auditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAudit" :loading="submitLoading">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 处理对话框 -->
    <el-dialog
      v-model="processDialogVisible"
      title="举报处理"
      :width="getDialogWidth()"
      :before-close="handleProcessDialogClose"
      destroy-on-close
    >
      <el-form 
        :model="processForm" 
        :rules="processRules"
        ref="processFormRef" 
        :label-width="isMobile.value ? '80px' : '120px'"
        :label-position="isMobile.value ? 'top' : 'right'"
      >
        <el-form-item label="举报ID：">
          <span>{{ currentReport.reportId }}</span>
        </el-form-item>
        <el-form-item label="处理结果：" prop="handleResult">
          <el-select v-model="processForm.handleResult" placeholder="请选择处理结果">
            <el-option label="删除内容" :value="1" />
            <!-- <el-option label="警告用户" :value="2" /> -->
            <el-option label="封禁用户" :value="3" />
            <el-option label="无处理" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理备注：" prop="handleRemark">
          <el-input
            v-model="processForm.handleRemark"
            type="textarea"
            :rows="3"
            placeholder="请输入处理备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" :class="{ 'mobile-dialog-footer': isMobile.value, 'mobile-buttons': isMobile.value }">
          <el-button @click="processDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitProcess" :loading="submitLoading">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getReportPageList, getReportDetail, auditReport, handleReport, getReportStats } from '@/api/reportApi'

// 响应式布局相关
const isMobile = computed(() => {
  return window.innerWidth < 768
})
const isTablet = computed(() => {
  return window.innerWidth >= 768 && window.innerWidth < 1024
})

// 处理窗口大小变化
const handleResize = () => {
  // 窗口大小变化时自动触发组件更新
}

// 获取对话框响应式宽度
const getDialogWidth = () => {
  if (isMobile.value) return '95%'
  if (isTablet.value) return '80%'
  return '60%'
}

// 定义接口
interface ReportInfo {
  reportId: number
  reporterUserId: number
  reporterNickname: string
  reporterPhone?: string
  reportedUserId: number
  reportedNickname: string
  reportedPhone?: string
  targetType: number
  targetTypeName: string
  targetId: number
  targetContent?: string
  reportTypeId: number
  reportTypeName: string
  reportReason: string
  reportImages: string | string[]
  reportStatus: number
  reportStatusName: string
  auditUserId: number
  auditUserName: string
  auditTime: string
  auditResult: number
  auditResultName: string
  auditRemark: string
  handleResult: number | null
  handleResultName: string
  handleRemark: string
  fileUrl?: string
  createTime: string
  updateTime: string
}

// 搜索表单
const searchForm = reactive({
  reporterUserId: '',
  reportedUserId: '',
  targetType: null,
  reportStatus: null,
  startTime: '',
  endTime: ''
})

// 分页参数
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 数据列表
const reportList = ref<ReportInfo[]>([])
const loading = ref(false)
const submitLoading = ref(false)

// 对话框状态
const detailDialogVisible = ref(false)
const detailLoading = ref(false)
const auditDialogVisible = ref(false)
const processDialogVisible = ref(false)

// 当前选中项
const currentReport = ref<ReportInfo | null>(null)

// 表单引用
const searchFormRef = ref<FormInstance>()
const auditFormRef = ref<FormInstance>()
const processFormRef = ref<FormInstance>()

// 审核表单
const auditForm = reactive({
  auditResult: null,
  handleResult: null,
  auditRemark: ''
})

// 处理表单
const processForm = reactive({
  handleResult: null,
  handleRemark: ''
})

// 审核表单规则
const auditRules = reactive<FormRules>({
  auditResult: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
  handleResult: [{ required: true, message: '请选择处理结果', trigger: 'change' }],
  auditRemark: [{ required: true, message: '请输入审核备注', trigger: 'blur' }]
})

// 处理表单规则
const processRules = reactive<FormRules>({
  handleResult: [{ required: true, message: '请选择处理结果', trigger: 'change' }],
  handleRemark: [{ required: true, message: '请输入处理备注', trigger: 'blur' }]
})

// 举报统计数据
const reportStats = ref({
  pendingCount: 0,
  todayCount: 0,
  totalCount: 0
})

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  switch (status) {
    case 0: // 待审核
      return ''
    case 1: // 审核中
      return 'warning'
    case 2: // 已处理
      return 'success'
    case 3: // 已驳回
      return 'danger'
    default:
      return ''
  }
}

// 获取举报统计数据
const fetchReportStats = async () => {
  try {
    const res = await getReportStats()
    reportStats.value = res.data
  } catch (error) {
    console.error('获取举报统计数据失败:', error)
    ElMessage.error('获取举报统计数据失败')
  }
}

// 获取举报列表
const getReportList = async () => {
  loading.value = true
  try {
    console.log('举报管理请求准备了')
    const params = {
      ...searchForm,
      page: pagination.currentPage,
      pageSize: pagination.pageSize
    }
    console.log('举报管理请求即将执行')
    const res = await getReportPageList(params)
     console.log('举报管理请求已经执行')
    reportList.value = res.data.list
    pagination.total = res.data.total
  } catch (error) {
    console.log('举报管理请求发送失败')
    ElMessage.error('获取举报列表失败')
  } finally {
    loading.value = false
  }
}

// 处理查询
const handleSearch = () => {
  pagination.currentPage = 1
  getReportList()
}

// 处理重置
const handleReset = () => {
  searchFormRef.value?.resetFields()
  pagination.currentPage = 1
  getReportList()
}

// 处理分页大小变化
const handleSizeChange = (val: number) => {
  pagination.pageSize = val
  pagination.currentPage = 1
  getReportList()
}

// 处理当前页变化
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  getReportList()
}

// 处理多选变化
const handleSelectionChange = (val: ReportInfo[]) => {
  // 可以在这里处理多选逻辑
}

// 判断是否为图片文件
const isImageFile = (url: string | undefined) => {
  if (!url) return false
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
  return imageExtensions.some(ext => url.toLowerCase().endsWith(ext))
}

// 判断是否为视频文件
const isVideoFile = (url: string | undefined) => {
  if (!url) return false
  const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.webm']
  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext))
}

// 判断文件是否有效
const isValidFile = (url: string | undefined) => {
  if (!url) return false
  // 简单的URL有效性检查
  try {
    new URL(url)
    return true
  } catch {
    return false
  }
}

// 查看详情
const handleView = async (row: ReportInfo) => {
  detailLoading.value = true
  try {
    const res = await getReportDetail(row.reportId)
    currentReport.value = res.data
    detailDialogVisible.value = true
  } catch (error) {
    ElMessage.error('获取举报详情失败')
  } finally {
    detailLoading.value = false
  }
}

// 关闭详情对话框
const handleDetailDialogClose = () => {
  detailDialogVisible.value = false
  currentReport.value = null
}

// 审核操作
const handleAudit = (row: ReportInfo) => {
  currentReport.value = row
  auditForm.auditResult = null
  auditForm.handleResult = null
  auditForm.auditRemark = ''
  auditDialogVisible.value = true
}

// 关闭审核对话框
const handleAuditDialogClose = () => {
  auditDialogVisible.value = false
  currentReport.value = null
  auditFormRef.value?.resetFields()
}

// 处理操作
const handleProcess = (row: ReportInfo) => {
  currentReport.value = row
  processForm.handleResult = null
  processForm.handleRemark = ''
  processDialogVisible.value = true
}

// 关闭处理对话框
const handleProcessDialogClose = () => {
  processDialogVisible.value = false
  currentReport.value = null
  processFormRef.value?.resetFields()
}

// 提交处理
const submitProcess = async () => {
  if (!processFormRef.value) return
  await processFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        const params = {
          reportId: currentReport.value?.reportId,
          handleResult: processForm.handleResult,
          handleRemark: processForm.handleRemark
        }
        const res = await handleReport(params)
        
        // 检查返回码是否为"200"
        if (res.code === '200') {
          ElMessage.success('处理成功')
          processDialogVisible.value = false
          
          // 更新当前行的状态，使其只显示查看按钮
          if (currentReport.value) {
            const index = reportList.value.findIndex(item => item.reportId === currentReport.value?.reportId)
            if (index !== -1) {
              // 更新该行数据，使处理按钮不再显示
              reportList.value[index] = {
                ...reportList.value[index],
                handleResult: processForm.handleResult // 设置handleResult，使处理按钮条件不满足
              }
            }
          }
        } else {
          ElMessage.error(res.message || '处理失败')
        }
      } catch (error) {
        ElMessage.error('处理失败')
      } finally {
        submitLoading.value = false
      }
    }
  })
}

// 提交审核
const submitAudit = async () => {
  if (!auditFormRef.value) return
  await auditFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        const params = {
          reportId: currentReport.value?.reportId,
          auditResult: auditForm.auditResult,
          handleResult: auditForm.handleResult,
          auditRemark: auditForm.auditRemark
        }
        await auditReport(params)
        
        ElMessage.success('审核成功')
        auditDialogVisible.value = false
        getReportList()
      } catch (error) {
        ElMessage.error('审核失败')
      } finally {
        submitLoading.value = false
      }
    }
  })
}

// 表格行样式处理
const tableRowClassName = ({ row, rowIndex }: { row: any, rowIndex: number }) => {
  return isMobile.value ? 'mobile-table-row' : ''
}

// 初始化
onMounted(() => {
  getReportList()
  fetchReportStats()
  window.addEventListener('resize', handleResize)
})

// 组件销毁时移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped lang="scss">
.report-info-container {
  padding: 20px;
  
  // 响应式容器内边距
  @media screen and (max-width: 767px) {
    padding: 10px;
  }
  
  .stats-row {
    margin-bottom: 20px;
  }
  
  .stat-card {
    height: 120px;
    
    // 响应式卡片高度
    @media screen and (max-width: 767px) {
      height: 100px;
    }
    
    .stat-content {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      
      .stat-title {
        font-size: 16px;
        color: #606266;
        margin-bottom: 10px;
        
        // 响应式标题字体
        @media screen and (max-width: 767px) {
          font-size: 12px;
          margin-bottom: 5px;
        }
      }
      
      .stat-number {
        font-size: 32px;
        font-weight: bold;
        color: #409eff;
        margin-bottom: 5px;
        
        // 响应式数字字体
        @media screen and (max-width: 767px) {
          font-size: 24px;
        }
      }
      
      .stat-desc {
        font-size: 14px;
        color: #909399;
        
        // 响应式描述字体
        @media screen and (max-width: 767px) {
          font-size: 11px;
        }
      }
    }
  }
  
  .search-card {
    margin-bottom: 20px;
    
    :deep(.el-card__body) {
      padding: 20px 20px 0 20px;
      
      @media screen and (max-width: 767px) {
        padding: 15px 15px 0 15px;
      }
    }
    
    .search-buttons {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 100%;
      padding-bottom: 20px;
      
      // 移动端按钮样式
      &.mobile-buttons {
        flex-direction: column;
        gap: 8px;
        
        & > button {
          width: 100%;
        }
      }
    }
  }
  
  .table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    
    &.mobile-pagination {
      justify-content: center;
      padding: 0 10px;
    }
  }
  
  .image-preview {
    display: flex;
    flex-wrap: wrap;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
    // 移动端对话框底部样式
    &.mobile-dialog-footer {
      justify-content: center;
      padding: 0 10px;
    }
  }
  
  // 移动端表格行样式
  .mobile-table-row {
    font-size: 12px;
  }
  
  // 响应式调整表格最小宽度
  @media screen and (max-width: 767px) {
    :deep(.el-table__header-wrapper) {
      font-size: 12px;
    }
    
    :deep(.el-table__cell) {
      padding: 8px 5px !important;
      font-size: 12px;
    }
    
    :deep(.el-table__body) {
      font-size: 12px;
    }
    
    // 按钮文字省略处理
    :deep(.el-button--small) {
      padding: 5px 8px;
    }
  }
  
  // 平板设备适配
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    padding: 15px;
    
    :deep(.el-table__cell) {
      padding: 10px 8px !important;
    }
  }
}</style>